<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<script>
		var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
			CSS.supports('top: constant(a)'))
		document.write(
			'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
			(coverSupport ? ', viewport-fit=cover' : '') + '" />')
	</script>
	<title></title>
	<!--preload-links-->
	<!--app-context-->
	<!-- <script src="/static/quill-1.3.7.min.js"></script> -->
	<!-- <script src="/static/image-resize-3.0.1.min.js"></script> -->
</head>
<style>
	@media screen and (min-width: 600px) {


		#app {
			width: 35vw;
			min-height: 100vh;
		}

		.blurry-background {
			background: -webkit-linear-gradient(to top, #E2E2E2, #C9D6FF);
			/* Chrome 10-25, Safari 5.1-6 */
			background: linear-gradient(to top, #E2E2E2, #C9D6FF);
			/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
			background-size: cover;
			/* 背景图片固定，不随页面滚动 */
			background-attachment: fixed;

			/* 使用filter属性添加模糊效果 */
			filter: blur(8px);

			/* 设置一个占位背景颜色，直到图片加载完成 */
			background-color: #333;

			/* 设置元素大小 */
			height: 100%;
			width: 100%;

			/* 将背景定位到视口的左上角 */
			position: fixed;
			top: 0;
			left: 0;

			/* 确保背景图在内容下方 */
			z-index: -1;
		}

		.content {
			/* 为了确保内容不会被模糊背景遮挡，可以设置一个较小的z-index */
			position: relative;
			z-index: 30;

			/* 添加一些内外边距，以便内容不会被紧贴边缘 */
		}
	}
</style>

<body>
	<div style="width: 100vw;height: 100vh;background-color: #000;opacity: 0.2;position: absolute;" class=""></div>

	<div style="width: 100vw;height: 100vh;position: absolute;" class="blurry-background"></div>
	<div class="w-screen  fixed flex justify-center ">

		<div style="height: 100vh;" class="content" id="app"><!--app-html--></div>
	</div>

	<script type="module" src="/main.js"></script>
</body>

</html>